import React, { useLayoutEffect, useMemo, useRef } from "react";
import { CONST_SYSTEM_MODULE } from "../../../../config/constant";
import { FormattedMessage, useIntl } from "react-intl";
import { Button, Tag } from "antd";
import { LibAppView } from "../../../../lib";
import { ResourceList } from "../../Component/ResourceList";
import { PlusOutlined } from "@ant-design/icons";
import { AdminRight } from "@/pages/Admin/data/AdminPageAuth";
import { useDelete } from "../../hooks/useDelete";

const List = LibAppView.withService()(({ withServiceApi }) => {
    const intl = useIntl();
    const microApp = LibAppView.useMicroApp();
    const listRef = useRef<any>(null);
    const deleteAction = useDelete({
        endPoint: "menus.delete",
        cancelEndPoint: "menus.cancel",
        data: {},
        listRef
    });
    const sysModuleList = useMemo(() => CONST_SYSTEM_MODULE.map((item) => ({
        ...item,
        i18nKey: item.label,
        label: intl.formatMessage({ id: item.label })
    })),[intl.locale]);

    const SystemoModuleField: Admin.IAdvancedField<Admin.ISelectOption[]> = useMemo(() => ({
        type: "Select",
        label: "system.module",
        name: "module",
        placeholder: "admin.layout.select.placeholder",
        defaultValue: null,
        data: [
            { label: intl.formatMessage({id: "admin.pages.languages.all"}),value: null },
            ...(sysModuleList as unknown) as any[]
        ]
    }), [sysModuleList]);
    const SearchFields: Admin.IAdvancedField[] = [
        SystemoModuleField,
        {
            type: "Input",
            label: "admin.pages.menus.edit.pathname",
            name: "name",
            placeholder: "admin.layout.input.placeholder",
            props: { autoComplete: "off" }
        }
    ];
    const columns = useMemo(() => ([
        {
            title: <FormattedMessage id="admin.pages.menus.list.id"/>,
            dataIndex: "id",
            width: 60,
            fixed: true
        },
        {
            title: <FormattedMessage id="admin.pages.menus.edit.module" />,
            dataIndex: "module",
            width: 80,
            fixed: true,
            render: (module: string) => {
                const mData = sysModuleList.find((v) => v.value === module);
                return <span>{mData?.label}</span>
            }
        },
        {
            title: <FormattedMessage id="admin.pages.menus.list.name"/>,
            dataIndex: "name",
            width: 140,
            fixed: true,
            render: (name: string) => {
                return (<FormattedMessage id={name} defaultMessage={name}/>);
            }
        }, {
            title: <FormattedMessage id="admin.pages.menus.list.pathname"/>,
            dataIndex: "pathname",
            fixed: false
        }, {
            title: <FormattedMessage id="admin.pages.menus.edit.parent" />,
            dataIndex: "parent_id",
            width: 80,
        },{
            title: <FormattedMessage id="admin.pages.menus.edit.status"/>,
            dataIndex: "status",
            width: 100,
            render: (status: number) => {
                return (<>
                    { status === 1 && <Tag color="green"><FormattedMessage id="admin.pages.menus.edit.status.enable"/></Tag> }
                    { status === 0 && <Tag color="error"><FormattedMessage id="admin.pages.menus.edit.status.disable"/></Tag> }
                </>);
            }
        }, {
            title: <FormattedMessage id="admin.pages.menus.list.sort"/>,
            dataIndex: "sort_id",
            width: 100
        },  {
            title: <FormattedMessage id="admin.pages.createUser"/>,
            dataIndex: "createUser",
            width: 100
        },{
            title: <FormattedMessage id="admin.pages.createTime"/>,
            dataIndex: "create_time",
            width: 180
        }, {
            title: <FormattedMessage id="admin.pages.updateUser"/>,
            dataIndex: "updateUser",
            width: 140
        },{
            title: <FormattedMessage id="admin.pages.updateTime"/>,
            dataIndex: "update_time",
            width: 180
        },{
            title: <FormattedMessage id="admin.pages.language.operate"/>,
            dataIndex: "id",
            width: 100,
            render: (id: number, data: any) => {
                return (<><AdminRight authRight="editable" mode="disabled">
                        <Button size="small" onClick={()=>{
                            microApp.startJourney("menuEditJourny", {
                                state: data
                            });
                        }}>
                            <FormattedMessage id="admin.pages.operate.edit"/>
                        </Button>
                    </AdminRight>
                    <AdminRight authRight="deleteable" mode="disabled">
                        <Button size="small" onClick={() => {
                            deleteAction.delete({
                                ...data,
                                status: -1
                            })
                        }}><FormattedMessage id="admin.pages.operate.delete"/></Button>
                    </AdminRight>
                </>);
            }
        }
    ]), [sysModuleList]);
     
 
    const listEndPoint = useMemo(() => ({
        endPoint: "menus.list"
    }), []);
    const Operator = useMemo(() => {
        return () => {
            return (<AdminRight authRight="editable" mode="disabled">
                    <Button type="primary" onClick={() => {
                        microApp.startJourney("menuEditJourny");
                    }}>
                        <PlusOutlined />
                        <span><FormattedMessage id="admin.pages.operate.add" /></span>
                    </Button>
                </AdminRight>
            );
        };
    }, [microApp]);
    useLayoutEffect(() => {
        return microApp.registeJourney({
            name: "menuEditJourny",
            title: "test journey",
            stepJourney: true,
            isTempJourney: true,
            steps: [{
                isMemoryPage: true,
                page: "admin.menusEdit"
            }]
        });
    }, []);
    return (
        <ResourceList
            refApi={listRef}
            tableColumns={columns}
            searchFields={SearchFields} 
            listEndPoint={listEndPoint}
            Operators={Operator}
        />
    );
});

export default List;